<template>
    <el-dialog v-model="addDialog" title="添加" width="800">
        <el-form
            ref="addFormRef"
            id="form"
            :model="addForm"
            :rules="roleRules"
            label-width="auto"
            class="demo-infoForm"
        >
            <el-form-item label="角色名称" label-width="80" prop="roleName">
                <el-input  v-model="addForm.roleName" />
            </el-form-item>
            <el-form-item label="角色备注" label-width="80" prop="roleDesc">
                <el-input  v-model="addForm.roleDesc" />
            </el-form-item>
            <el-form-item label="组织名称" label-width="80" prop="organizationId">
                <el-tree-select v-model="addForm.organizationId" :data="organizationIdList" :props="defaultProps"  node-key="id" check-strictly
                                :render-after-expand="false" style="width: 240px" />
            </el-form-item>
        </el-form>
        <template #footer>

            <div class="dialog-footer">
                <el-button @click="addDialog = false">关闭</el-button>
                <el-button @click="submitForm(addFormRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import {defineModel} from "@vue/runtime-core";
    import {reactive} from "@vue/reactivity";
    import axios from '@/axios/index.js'
    import {onMounted, ref} from "vue";
    import {useStaffStore} from "@/stores/staff.js";

    let addDialog = defineModel('addDialog')
    let emits=defineEmits(['loadTableData'])

    const defaultProps = {
      label: 'organizationName'
    }
    let addFormRef=ref()

    const addForm = ref({
      roleName:'',
      roleDesc: '',
      organizationId: '',
    })

    //用户添加表单校验规则
    const roleRules = reactive({
      roleName:[
        {required: true, message: '请输入角色名称', trigger: 'blur'},
        { min: 2, max: 20, message: '长度在 2 到 20 个字符'},
      ],
      roleDesc:[
          { required: true, message: '请输入角色备注', trigger: 'blur'},
          { min: 2, max: 20, message: '长度在 2 到 20 个字符'},
      ],
      organizationId:[
          { required: true, message: '请输入组织ID', trigger: 'blur'},
      ],
      createBy:[
          { required: true, message: '请输入创建人', trigger: 'blur'},
          { min: 2, max: 20, message: '长度在 2 到 20 个字符'},
      ],
    })

    //添加用户角色
    const submitForm =(formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
          if (valid) {
            axios.post('/role/insert', {
              roleName:addForm.value.roleName,
              roleDesc: addForm.value.roleDesc,
              organizationId: addForm.value.organizationId,
              createBy:useStaffStore().staffInfo.staff.id,
            }).then(resp=>{
              addForm.value.organizationId=''
              addForm.value.roleName=''
              addForm.value.roleDesc=''
              addDialog.value = false
              emits('loadTableData')
            })
            addDialog.value= false
        }
      })
    }

    let organizationIdList= ref([])
    //获取组织ID列表
    onMounted(()=>axios.get('/organization/getList').then(resp=>{
     organizationIdList.value=resp.data.data
     }))
</script>

<style scoped>

</style>